<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Filters</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<link type="text/css" href="https://raw.github.com/commons/common.css/master/build/common.css" rel="stylesheet">
<link type="text/css" href="main.less" media="screen" rel="stylesheet/less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.1/less.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Filters</h1>
<div class="grayscale"><img src="https://raw.github.com/commons/less/master/demo/_assets/img/robot.jpg" width="150" height="150"><pre>.grayscale(1);</pre></div>
<div class="blur"><img src="https://raw.github.com/commons/less/master/demo/_assets/img/robot.jpg" width="150" height="150"><pre>.blur(1px);</pre></div>
<div class="sepia"><img src="https://raw.github.com/commons/less/master/demo/_assets/img/robot.jpg" width="150" height="150"><pre>.sepia(1);</pre></div>
<div class="opacity"><img src="https://raw.github.com/commons/less/master/demo/_assets/img/robot.jpg" width="150" height="150"><pre>.opacity(.5);</pre></div>
<div class="hue-rotate"><img src="https://raw.github.com/commons/less/master/demo/_assets/img/robot.jpg" width="150" height="150"><pre>.hue-rotate();</pre></div>
<div class="invert"><img src="https://raw.github.com/commons/less/master/demo/_assets/img/robot.jpg" width="150" height="150"><pre>.invert();</pre></div>
<div class="brightness"><img src="https://raw.github.com/commons/less/master/demo/_assets/img/robot.jpg" width="150" height="150"><pre>.brightness(.8);</pre></div>




</body>
</html>